<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1:插值表达式、data、methods、computed和watch</title>
    <script>src="https://unpkg.com/vue@3"</script>
</head>
<body>
    <h3 id="app">
        <h1>知识点1:插值表达式</h1>
        <p>我是变量:{{msg}}</p>
        <!-- {{}}插值表达式符号 -->
         <p>我是表达式:{{5*6-10}}</p>
         <p>我是表达式:{{num+1}}</p>
         <p>我是条件运算符:{{1+1==2?1:0}}</p>
         <p>我是函数:{{add()}}</p>
    <h1>知识点2:data</h1>
        <h3>方法名(){} 或者 方法名:function(){}</h3>
        <p>{{sub(1000000)}}</p>
        <h3>遇到复杂逻辑时,vue.js提倡我们使用computed计算属性<div class=""></div></h3>
        </h3>
        <p>{{rev}}</p>
        <p>{{revMethod()}}</p>
        <p>{{double}}</p>
        <h3>
            计算属性是基于其依赖的变量进行缓存的，计算属性只有在它相关的依赖发生改变的时候才会重新求值。
            而方法则是每次页面重新渲染时都会进行计算
        </h3>
        <h3>通常我们计算属性是只读的,不能进行修改</h3>
        <button>@click="double=100">我们来尝试下修改计算属性的值</button>
        <h3>通过传入一个包含get和set的函数的对象,可以得到一个可读可写的计算属性</h3>
        <h3>
            绝大多数情况下,只会使用默认的get函数来读取一个计算属性,在实际业务中,很少使用到set.
            因此，我们在使用时，通常直接用默认写法,不必将get和set都声明
        </h3>
     <h1>知识点5 watch 监听</h1>
        <h3>
            当我们需要在某种状态变化时，执行一些其他的操作，watch具有状态监听的功能，
            只要监听到当前vue实例中的数据变化，就会调用当前数据所绑定的方法。
        </h3>
        <h4>1.函数侦听器:在watch选项中声明的函数即为函数式侦听器，其中函数名就是我们要侦听的数据源</h4>
        <!-- 在后台中输入appConn.$data.grade=100 或 50 来体会一下监听器 -->
</body>
</html>

<script>
    const appConn =Vue.createApp({
        //data里面放置全部的数据，包括变量，对象等
        data(){
            return{
                msg:"我的第一个vue页面",
                num:1
            }
        },
        //methods里面放置全部的方法
        methods:{
            add(){
                return this.num +100
            },    
            sub:function(){
                return this.num -val

            },    
            revMethod(){
                console.log(object);
                return this.msg.split('').reverse().join('')
            }
        },
        computed:{
            rev(){
                console.log("我是计算属性,我被调用了一次");
                return this.msg.split('').reverse().join('')
            },
            double(){
                return this.num * 2
            }
        double:{
            get:function(){
                return this.num*2
            },
            set:function(val){
                this.num =val/2
            }
        }    
        },
        watch:{
            //函数侦听器
            grade(newData,oldData){
                console.log("改变前的数据:"+ oldData);
                console.log("改变后的数据:"+ newData);
                if(newData>oldData)
                   console.log("你很棒,有进步!");
                else
                   console.log("你怎么能越考越差呢？陈秋宇")
            }
        }
    }).mount("#app")
</script>